
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: More Dijit TextBoxes</title>
		<link rel="stylesheet" href="css/demo.css" media="screen">
		<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" media="screen">
		<style>
			body > div { margin-bottom:20px; }
		</style>
	</head>
	<body class="claro">
		<h1>dijit/form/NumberTextBox, dijit/form/CurrencyTextBox, dijit/form/TimeTextBox, dijit/form/DateTextBox</h1>
		<div>
			<label for="number">Age:</label>
			<input id="number">
		</div>
		<div>
			<label for="currency">Annual Salary:</label>
			<input id="currency">
		</div>
		<div>
			<label for="time">Start Time:</label>
			<input id="time">
		</div>
		<div>
			<label for="date">Start Date:</label>
			<input id="date">
		</div>
		<!-- load dojo and provide config via data attribute -->
		<script src="js/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			// load requirements for declarative widgets in page content
			require(["dijit/form/NumberTextBox", "dijit/form/CurrencyTextBox", "dijit/form/TimeTextBox", "dijit/form/DateTextBox", "dojo/domReady!"], function(NumberTextBox, CurrencyTextBox, TimeTextBox, DateTextBox) {
				var number = new NumberTextBox({
					value: 54,
					required: true
				}, "number");
				number.startup();

				var currency = new CurrencyTextBox({
					value:54775.53,
					required:true,
					constraints:{fractional:true},
					currency:"USD",
					invalidMessage:"Invalid amount. Cents are mandatory."
				}, "currency");
				currency.startup();

				var time = new TimeTextBox({
					constraints: {
						timePattern: "HH:mm:ss",
						clickableIncrement: "T00:15:00",
						visibleIncrement: "T00:15:00",
						visibleRange: "T01:00:00"
					},
					invalidMessage:"Invalid time."
				},"time");
				time.startup();

				var date = new DateTextBox({
					value: new Date(2011, 8, 15)
				}, "date");
				date.startup();
			});
		</script>
	</body>
</html>
